import React from 'react';
import classNames from 'classnames';
import dayjs from 'dayjs';
import avatar from '../images/avatar.jpeg'; // 导入图片

export const CommentList = ({ list, changeAttitude, delComment }) => {
  return (
    <div className="comment-list">
      {list.map((item) => {
        return (
          <div className="comment-item" key={item.id}>
            <div>
              <img className="user-head" src={avatar} alt="头像" />
            </div>

            <div className="comment">
              {/* 评论人 */}
              <div className="user">{item.author}</div>
              {/* 评论内容 */}
              <p className="text">{item.comment}</p>
              <div className="info">
                <span className="time">
                  {/* {item.time.toLocaleDateString()} */}
                  {dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')}
                </span>
                <span
                  // className={item.attitude === 1 ? 'like liked' : 'like'}
                  className={classNames('like', {
                    liked: item.attitude === 1,
                  })}
                  onClick={() => {
                    return changeAttitude(item.id, item.attitude === 1 ? 0 : 1);
                  }}
                >
                  <i className="icon" />
                </span>
                <span
                  // className={item.attitude === -1 ? 'hate hated' : 'hate'}
                  className={classNames('hate', {
                    hated: item.attitude === -1,
                  })}
                  onClick={() => {
                    return changeAttitude(
                      item.id,
                      item.attitude === -1 ? 0 : -1
                    );
                  }}
                >
                  <i className="icon" />
                </span>
                <span
                  className="btn-hover"
                  onClick={(e) => {
                    return delComment(e, item.id);
                  }}
                >
                  删除
                </span>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};
